<template>
	<div class="adm">
		<!-- 后台页面 -->
		<div class="box_header">
			<span>后台管理-导航栏位置</span>
		</div>
		<div class="box_middle">
			<div class="middle_left">
				<el-menu :router="true">
					<el-menu-item index="/adm/type">类型管理</el-menu-item>
					<el-menu-item index="/adm/book">书本管理</el-menu-item>
					<el-menu-item index="/adm/hot">热点管理</el-menu-item>
				</el-menu>
			</div>
			<!-- <div class="middle_left">
				<h3>左边菜单</h3>
				<ol>
					<router-link to="/adm/type"><li>类型管理</li></router-link>
					<router-link to="/adm/book"><li>书本管理</li></router-link>
					<router-link to="/adm/hot"><li>热点管理</li></router-link>
				</ol>
			</div> -->
			<div class="middle_right">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'Adm',
		
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: white;
	}
	.adm{
		width: 100%;
		background-color: #42B983;
	}
	.adm .box_header{
		width: 100%;
		height: 55px;
		line-height: 55px;
		font-size: 25px;
		text-align: center;
		background-color: skyblue;
		position: relative;
	}
	.adm .box_header a{
		margin-left: 1%;
		margin-right: 1%;
	}
	.adm .box_header span{
		position: absolute;
		top: 0;
		left: 15px;
		color: white;
	}
	.adm .box_middle{
		width: 100%;
		height: 800px;
	}
	.adm .box_middle .middle_left{
		width: 20%;
		height: 100%;
		float: left;
		background-color: royalblue;
	}
	.adm .box_middle .middle_right{
		width: 80%;
		height: 100%;
		float: right;
		/* margin-right: 3%; */
		background-color: lightgreen;
	}
	.adm .box_middle .middle_left h3,.adm .box_middle .middle_left ol{
		margin-left: 5%;
		font-size: 18px;
		list-style: none;
	}
	.adm .box_middle .middle_left ol li{
		width: 80%;
		line-height: 55px;
		border-radius: 6px;
		margin-top: 15px;
		text-align: center;
		background-color: #ffaa00;
		color: white;
		font-weight: bold;
		cursor: pointer;
	}
	.adm .box_middle .middle_left ol li:hover{
		background-color: blueviolet;
		color: black;
	}
</style>
